<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>十字通讯社 - 关于我们</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- Firebase SDK -->
    <script type="module">
        // 导入需要的Firebase模块
        import { initializeApp } from "https://www.gstatic.com/firebasejs/12.3.0/firebase-app.js";
        import { getFirestore } from "https://www.gstatic.com/firebasejs/12.3.0/firebase-firestore.js";
        import { getAnalytics } from "https://www.gstatic.com/firebasejs/12.3.0/firebase-analytics.js";

        // Firebase配置
        const firebaseConfig = {
            apiKey: "AIzaSyDstICwWgLYdehjTOHDQgqLo2PixCtAo0I",
            authDomain: "website-568e5.firebaseapp.com",
            projectId: "website-568e5",
            storageBucket: "website-568e5.firebasestorage.app",
            messagingSenderId: "550643967633",
            appId: "1:550643967633:web:c042e7d41d4070fabc0130",
            measurementId: "G-4DR9JHFPN8"
        };

        // 初始化Firebase应用
        const app = initializeApp(firebaseConfig);
        
        // 初始化服务
        const db = getFirestore(app);
        const analytics = getAnalytics(app);
        
        // 暴露到全局，供其他脚本使用
        window.db = db;
    </script>
    <script>
        // Tailwind配置
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        'burgundy': '#800020',
                        'burgundy-light': '#a52a2a',
                        'burgundy-dark': '#4b000f',
                        'cream': '#fffdd0',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                        serif: ['Georgia', 'serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
            }
            .transition-navbar {
                transition: background-color 0.3s, padding 0.3s, box-shadow 0.3s;
            }
            .animate-fade-in {
                animation: fadeIn 0.8s ease-in-out;
            }
            .animate-slide-up {
                animation: slideUp 0.8s ease-out;
            }
            .animate-reveal {
                animation: reveal 1.2s ease-out;
            }
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes slideUp {
            from { transform: translateY(30px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }

        @keyframes reveal {
            from { clip-path: inset(0 100% 0 0); opacity: 0; }
            to { clip-path: inset(0 0 0 0); opacity: 1; }
        }
    </style>
</head>
<body class="bg-white font-sans text-gray-800 overflow-x-hidden">
    <!-- 导航栏 -->
    <nav id="main-nav" class="fixed w-full z-50 transition-navbar py-4 bg-burgundy shadow-md">
        <div class="container mx-auto px-4 md:px-8">
            <div class="flex justify-between items-center">
                <!-- Logo -->
                <a href="index.html" class="flex items-center space-x-2">
                    <div class="w-10 h-10 rounded-full bg-white flex items-center justify-center">
                        <span class="text-burgundy font-bold text-xl">十</span>
                    </div>
                    <span class="text-2xl font-bold text-white">十字通讯社</span>
                </a>
                
                <!-- 桌面导航 -->
                <div class="hidden md:flex items-center space-x-8">
                    <a href="index.html" class="text-white hover:text-gray-200 font-medium transition-colors duration-300">首页</a>
                    <a href="jobs.html" class="text-white hover:text-gray-200 font-medium transition-colors duration-300">招聘岗位</a>
                    <a href="about.html" class="text-white hover:text-gray-200 font-medium transition-colors duration-300 border-b-2 border-white">关于我们</a>
                    <a href="admin.html" class="bg-white text-burgundy px-4 py-2 rounded-md hover:bg-gray-100 transition-colors duration-300 font-medium">管理后台</a>
                </div>
                
                <!-- 移动端菜单按钮 -->
                <button id="menu-toggle" class="md:hidden text-white text-2xl">
                    <i class="fa fa-bars"></i>
                </button>
            </div>
        </div>
        
        <!-- 移动端导航菜单 -->
        <div id="mobile-menu" class="md:hidden hidden bg-white shadow-lg absolute w-full">
            <div class="container mx-auto px-4 py-3 flex flex-col space-y-3">
                <a href="index.html" class="text-burgundy hover:text-burgundy-dark py-2 border-b border-gray-100">首页</a>
                <a href="jobs.html" class="text-burgundy hover:text-burgundy-dark py-2 border-b border-gray-100">招聘岗位</a>
                <a href="about.html" class="text-burgundy hover:text-burgundy-dark py-2 border-b border-gray-100">关于我们</a>
                <a href="admin.html" class="bg-burgundy text-white px-4 py-2 rounded-md text-center">管理后台</a>
            </div>
        </div>
    </nav>

    <!-- 页面标题区域 -->
    <header class="pt-28 pb-16 bg-gray-50">
        <div class="container mx-auto px-4 text-center">
            <h1 class="text-[clamp(2rem,6vw,4rem)] font-bold text-gray-900 mb-4 animate-fade-in">关于我们</h1>
            <p id="about-tagline" class="text-gray-600 text-lg max-w-2xl mx-auto animate-slide-up">传递真相，连接世界</p>
        </div>
    </header>

    <!-- 关于我们内容 -->
    <section class="py-16">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center max-w-6xl mx-auto">
                <div class="order-2 lg:order-1">
                    <h2 id="about-title" class="text-[clamp(1.5rem,4vw,2.5rem)] font-bold text-gray-900 mb-6 animate-fade-in">我们的故事</h2>
                    <div id="about-content" class="space-y-4 text-gray-700 animate-slide-up">
                        <!-- 内容将通过JavaScript动态加载 -->
                        <p>加载中...</p>
                    </div>
                    <div class="mt-8 animate-slide-up">
                        <a href="#values" class="inline-flex items-center text-burgundy font-medium hover:text-burgundy-dark transition-colors duration-300">
                            了解我们的价值观
                            <i class="fa fa-long-arrow-right ml-2"></i>
                        </a>
                    </div>
                </div>
                <div class="order-1 lg:order-2 animate-reveal">
                    <img id="about-image" src="https://picsum.photos/id/1070/800/600" alt="十字通讯社办公环境" class="w-full h-auto rounded-lg shadow-xl">
                </div>
            </div>
        </div>
    </section>

    <!-- 核心价值观 -->
    <section id="values" class="py-16 bg-gray-50">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <h2 class="text-[clamp(1.5rem,4vw,2.5rem)] font-bold text-gray-900 mb-4">核心价值观</h2>
                <div class="w-20 h-1 bg-burgundy mx-auto mb-8"></div>
                <p class="text-gray-600 max-w-2xl mx-auto">这些价值观指导着我们的日常工作和决策，是我们作为新闻机构的基石</p>
            </div>
            
            <div id="values-container" class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
                <!-- 价值观内容将通过JavaScript动态加载 -->
                <div class="col-span-full text-center py-10">
                    <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-burgundy mx-auto mb-4"></div>
                    <p class="text-gray-500">加载价值观内容中...</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 团队介绍 -->
    <section class="py-16">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <h2 class="text-[clamp(1.5rem,4vw,2.5rem)] font-bold text-gray-900 mb-4">我们的团队</h2>
                <div class="w-20 h-1 bg-burgundy mx-auto mb-8"></div>
                <p class="text-gray-600 max-w-2xl mx-auto">由经验丰富的记者、编辑和媒体专业人士组成的团队</p>
            </div>
            
            <div id="team-container" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 max-w-6xl mx-auto">
                <!-- 团队成员将通过JavaScript动态加载 -->
                <div class="col-span-full text-center py-10">
                    <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-burgundy mx-auto mb-4"></div>
                    <p class="text-gray-500">加载团队成员中...</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 联系方式 -->
    <section class="py-16 bg-burgundy text-white">
        <div class="container mx-auto px-4">
            <div class="max-w-6xl mx-auto">
                <div class="text-center mb-16">
                    <h2 class="text-[clamp(1.5rem,4vw,2.5rem)] font-bold mb-4">联系我们</h2>
                    <div class="w-20 h-1 bg-white mx-auto mb-8"></div>
                    <p class="text-white/80 max-w-2xl mx-auto">如果您有任何问题、建议或新闻线索，请随时与我们联系</p>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
                    <div>
                        <div class="space-y-8">
                            <div class="flex items-start">
                                <div class="w-12 h-12 bg-white text-burgundy rounded-full flex items-center justify-center mr-4 flex-shrink-0">
                                    <i class="fa fa-map-marker text-xl"></i>
                                </div>
                                <div>
                                    <h3 class="text-xl font-semibold mb-2">地址</h3>
                                    <p id="contact-address" class="text-white/80">北京市朝阳区新闻大厦A座15层</p>
                                </div>
                            </div>
                            
                            <div class="flex items-start">
                                <div class="w-12 h-12 bg-white text-burgundy rounded-full flex items-center justify-center mr-4 flex-shrink-0">
                                    <i class="fa fa-phone text-xl"></i>
                                </div>
                                <div>
                                    <h3 class="text-xl font-semibold mb-2">电话</h3>
                                    <p id="contact-phone" class="text-white/80">+86 10 8888 7777</p>
                                </div>
                            </div>
                            
                            <div class="flex items-start">
                                <div class="w-12 h-12 bg-white text-burgundy rounded-full flex items-center justify-center mr-4 flex-shrink-0">
                                    <i class="fa fa-envelope text-xl"></i>
                                </div>
                                <div>
                                    <h3 class="text-xl font-semibold mb-2">邮箱</h3>
                                    <p id="contact-email" class="text-white/80">contact@crossnews.com</p>
                                </div>
                            </div>
                        </div>
                        
                        <div class="mt-12">
                            <h3 class="text-xl font-semibold mb-4">关注我们</h3>
                            <div class="flex space-x-4">
                                <a href="#" class="w-10 h-10 bg-white/20 hover:bg-white/30 rounded-full flex items-center justify-center transition-colors duration-300">
                                    <i class="fa fa-weibo"></i>
                                </a>
                                <a href="#" class="w-10 h-10 bg-white/20 hover:bg-white/30 rounded-full flex items-center justify-center transition-colors duration-300">
                                    <i class="fa fa-wechat"></i>
                                </a>
                                <a href="#" class="w-10 h-10 bg-white/20 hover:bg-white/30 rounded-full flex items-center justify-center transition-colors duration-300">
                                    <i class="fa fa-twitter"></i>
                                </a>
                                <a href="#" class="w-10 h-10 bg-white/20 hover:bg-white/30 rounded-full flex items-center justify-center transition-colors duration-300">
                                    <i class="fa fa-facebook"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                    
                    <div>
                        <form class="bg-white p-8 rounded-lg text-gray-800">
                            <h3 class="text-xl font-semibold mb-6">发送消息</h3>
                            
                            <div class="mb-4">
                                <label for="contact-name" class="block text-gray-700 mb-2">姓名</label>
                                <input type="text" id="contact-name" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-burgundy focus:border-transparent">
                            </div>
                            
                            <div class="mb-4">
                                <label for="contact-email-input" class="block text-gray-700 mb-2">邮箱</label>
                                <input type="email" id="contact-email-input" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-burgundy focus:border-transparent">
                            </div>
                            
                            <div class="mb-4">
                                <label for="contact-subject" class="block text-gray-700 mb-2">主题</label>
                                <input type="text" id="contact-subject" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-burgundy focus:border-transparent">
                            </div>
                            
                            <div class="mb-6">
                                <label for="contact-message" class="block text-gray-700 mb-2">消息</label>
                                <textarea id="contact-message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-burgundy focus:border-transparent"></textarea>
                            </div>
                            
                            <button type="submit" class="w-full bg-burgundy text-white py-3 rounded-md hover:bg-burgundy-dark transition-colors duration-300 font-medium">
                                发送消息
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="bg-gray-900 text-white pt-16 pb-8">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12">
                <div>
                    <div class="flex items-center space-x-2 mb-6">
                        <div class="w-10 h-10 rounded-full bg-burgundy flex items-center justify-center">
                            <span class="text-white font-bold text-xl">十</span>
                        </div>
                        <span class="text-2xl font-bold">十字通讯社</span>
                    </div>
                    <p class="text-gray-400 mb-6">传递真相，连接世界，我们致力于提供最及时、最准确的新闻报道。</p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">
                            <i class="fa fa-weibo text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">
                            <i class="fa fa-wechat text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">
                            <i class="fa fa-twitter text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">
                            <i class="fa fa-facebook text-xl"></i>
                        </a>
                    </div>
                </div>
                
                <div>
                    <h3 class="text-lg font-semibold mb-6">快速链接</h3>
                    <ul class="space-y-3">
                        <li><a href="index.html" class="text-gray-400 hover:text-white transition-colors duration-300">首页</a></li>
                        <li><a href="jobs.html" class="text-gray-400 hover:text-white transition-colors duration-300">招聘岗位</a></li>
                        <li><a href="about.html" class="text-gray-400 hover:text-white transition-colors duration-300">关于我们</a></li>
                        <li><a href="admin.html" class="text-gray-400 hover:text-white transition-colors duration-300">管理后台</a></li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="text-lg font-semibold mb-6">联系我们</h3>
                    <ul class="space-y-3">
                        <li class="flex items-start">
                            <i class="fa fa-map-marker mt-1 mr-3 text-burgundy"></i>
                            <span class="text-gray-400">北京市朝阳区新闻大厦A座15层</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-phone mr-3 text-burgundy"></i>
                            <span class="text-gray-400">+86 10 8888 7777</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-envelope mr-3 text-burgundy"></i>
                            <span class="text-gray-400">contact@crossnews.com</span>
                        </li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="text-lg font-semibold mb-6">法律信息</h3>
                    <ul class="space-y-3">
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">隐私政策</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">使用条款</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">版权声明</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">免责声明</a></li>
                    </ul>
                </div>
            </div>
            
            <div class="border-t border-gray-800 pt-8 text-center text-gray-500">
                <p>&copy; 2025 十字通讯社. 保留所有权利.</p>
            </div>
        </div>
    </footer>

    <script>
        // 导航栏滚动效果
        window.addEventListener('scroll', function() {
            const nav = document.getElementById('main-nav');
            if (window.scrollY > 50) {
                nav.classList.add('py-2');
                nav.classList.remove('py-4');
            } else {
                nav.classList.add('py-4');
                nav.classList.remove('py-2');
            }
        });
        
        // 移动端菜单切换
        document.getElementById('menu-toggle').addEventListener('click', function() {
            const mobileMenu = document.getElementById('mobile-menu');
            mobileMenu.classList.toggle('hidden');
        });
        
        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const targetId = this.getAttribute('href');
                if (targetId !== '#') {
                    document.querySelector(targetId).scrollIntoView({
                        behavior: 'smooth'
                    });
                    
                    // 关闭移动菜单
                    document.getElementById('mobile-menu').classList.add('hidden');
                }
            });
        });
        
        // 从Firebase Firestore加载数据的函数
        import { getDoc, doc } from "https://www.gstatic.com/firebasejs/12.3.0/firebase-firestore.js";
        
        // 加载关于我们内容
        async function loadAboutContent() {
            try {
                // 从Firebase获取关于我们内容
                const docRef = doc(window.db, "about", "aboutUs");
                const docSnap = await getDoc(docRef);
                
                if (docSnap.exists()) {
                    const aboutData = docSnap.data();
                    
                    // 更新页面内容
                    document.getElementById('about-tagline').textContent = aboutData.tagline || '传递真相，连接世界';
                    document.getElementById('about-title').textContent = aboutData.title || '我们的故事';
                    
                    // 更新关于我们内容
                    const contentContainer = document.getElementById('about-content');
                    contentContainer.innerHTML = '';
                    
                    if (aboutData.content && Array.isArray(aboutData.content)) {
                        aboutData.content.forEach(paragraph => {
                            const p = document.createElement('p');
                            p.textContent = paragraph;
                            contentContainer.appendChild(p);
                        });
                    } else {
                        contentContainer.innerHTML = `
                            <p>十字通讯社成立于2010年，是一家致力于提供高质量新闻报道的通讯社。我们的记者遍布全球各地，为读者带来及时、准确、客观的新闻资讯。</p>
                            <p>多年来，我们始终坚持新闻的真实性和客观性，赢得了广大读者的信任和支持。我们的报道涵盖政治、经济、文化、科技等多个领域，为读者呈现全方位的世界图景。</p>
                            <p>在数字时代，我们不断创新传播方式，通过多种平台向读者传递新闻，努力适应媒体环境的变化，保持新闻的活力和影响力。</p>
                        `;
                    }
                    
                    // 更新图片
                    if (aboutData.imageUrl) {
                        document.getElementById('about-image').src = aboutData.imageUrl;
                        document.getElementById('about-image').alt = aboutData.imageAlt || '十字通讯社办公环境';
                    }
                    
                    // 更新联系方式
                    if (aboutData.contact) {
                        document.getElementById('contact-address').textContent = aboutData.contact.address || '北京市朝阳区新闻大厦A座15层';
                        document.getElementById('contact-phone').textContent = aboutData.contact.phone || '+86 10 8888 7777';
                        document.getElementById('contact-email').textContent = aboutData.contact.email || 'contact@crossnews.com';
                    }
                } else {
                    console.log("No such document!");
                }
            } catch (error) {
                console.error("Error getting document:", error);
            }
        }
        
        // 加载核心价值观
        async function loadValues() {
            const valuesContainer = document.getElementById('values-container');
            
            try {
                // 从Firebase获取核心价值观
                const docRef = doc(window.db, "about", "values");
                const docSnap = await getDoc(docRef);
                
                if (docSnap.exists()) {
                    const valuesData = docSnap.data();
                    
                    if (valuesData.values && Array.isArray(valuesData.values)) {
                        valuesContainer.innerHTML = '';
                        
                        valuesData.values.forEach((value, index) => {
                            const valueCard = document.createElement('div');
                            valueCard.className = 'bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 animate-fade-in';
                            valueCard.style.animationDelay = `${index * 0.1}s`;
                            
                            valueCard.innerHTML = `
                                <div class="w-14 h-14 bg-burgundy/10 text-burgundy rounded-full flex items-center justify-center text-2xl font-bold mb-5 mx-auto">
                                    <i class="${value.icon || 'fa-check'}"></i>
                                </div>
                                <h3 class="text-xl font-bold text-center mb-3">${value.title}</h3>
                                <p class="text-gray-600 text-center">${value.description}</p>
                            `;
                            
                            valuesContainer.appendChild(valueCard);
                        });
                    } else {
                        // 默认价值观
                        loadDefaultValues(valuesContainer);
                    }
                } else {
                    console.log("No such document!");
                    loadDefaultValues(valuesContainer);
                }
            } catch (error) {
                console.error("Error getting document:", error);
                loadDefaultValues(valuesContainer);
            }
        }
        
        // 加载默认价值观
        function loadDefaultValues(container) {
            container.innerHTML = `
                <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 animate-fade-in">
                    <div class="w-14 h-14 bg-burgundy/10 text-burgundy rounded-full flex items-center justify-center text-2xl font-bold mb-5 mx-auto">
                        <i class="fa-check"></i>
                    </div>
                    <h3 class="text-xl font-bold text-center mb-3">真实性</h3>
                    <p class="text-gray-600 text-center">我们坚持新闻的真实性，深入调查，多方求证，确保每一条新闻都经得起检验。</p>
                </div>
                
                <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 animate-fade-in" style="animation-delay: 0.1s">
                    <div class="w-14 h-14 bg-burgundy/10 text-burgundy rounded-full flex items-center justify-center text-2xl font-bold mb-5 mx-auto">
                        <i class="fa-balance-scale"></i>
                    </div>
                    <h3 class="text-xl font-bold text-center mb-3">客观性</h3>
                    <p class="text-gray-600 text-center">我们保持中立客观的态度，全面呈现事件的多个方面，让读者自行判断。</p>
                </div>
                
                <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 animate-fade-in" style="animation-delay: 0.2s">
                    <div class="w-14 h-14 bg-burgundy/10 text-burgundy rounded-full flex items-center justify-center text-2xl font-bold mb-5 mx-auto">
                        <i class="fa-bolt"></i>
                    </div>
                    <h3 class="text-xl font-bold text-center mb-3">时效性</h3>
                    <p class="text-gray-600 text-center">我们追求新闻的时效性，快速反应，及时报道，让读者第一时间了解事件进展。</p>
                </div>
            `;
        }
        
        // 加载团队成员
        async function loadTeam() {
            const teamContainer = document.getElementById('team-container');
            
            try {
                // 从Firebase获取团队成员
                const docRef = doc(window.db, "about", "team");
                const docSnap = await getDoc(docRef);
                
                if (docSnap.exists()) {
                    const teamData = docSnap.data();
                    
                    if (teamData.members && Array.isArray(teamData.members)) {
                        teamContainer.innerHTML = '';
                        
                        teamData.members.forEach((member, index) => {
                            const memberCard = document.createElement('div');
                            memberCard.className = 'bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-all duration-300 transform hover:-translate-y-2 animate-fade-in';
                            memberCard.style.animationDelay = `${index * 0.1}s`;
                            
                            memberCard.innerHTML = `
                                <div class="relative h-64 overflow-hidden">
                                    <img src="${member.imageUrl || `https://picsum.photos/id/${30 + index}/400/600`}" alt="${member.name}" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
                                </div>
                                <div class="p-5 text-center">
                                    <h3 class="text-xl font-bold mb-1">${member.name}</h3>
                                    <p class="text-burgundy mb-3">${member.position}</p>
                                    <p class="text-gray-600 text-sm">${member.bio}</p>
                                </div>
                            `;
                            
                            teamContainer.appendChild(memberCard);
                        });
                    } else {
                        // 默认团队成员
                        loadDefaultTeam(teamContainer);
                    }
                } else {
                    console.log("No such document!");
                    loadDefaultTeam(teamContainer);
                }
            } catch (error) {
                console.error("Error getting document:", error);
                loadDefaultTeam(teamContainer);
            }
        }
        
        // 加载默认团队成员
        function loadDefaultTeam(container) {
            container.innerHTML = `
                <div class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-all duration-300 transform hover:-translate-y-2 animate-fade-in">
                    <div class="relative h-64 overflow-hidden">
                        <img src="https://picsum.photos/id/30/400/600" alt="张明" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
                    </div>
                    <div class="p-5 text-center">
                        <h3 class="text-xl font-bold mb-1">张明</h3>
                        <p class="text-burgundy mb-3">总编辑</p>
                        <p class="text-gray-600 text-sm">前新华社资深编辑，拥有20年新闻从业经验，负责通讯社整体内容方向。</p>
                    </div>
                </div>
                
                <div class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-all duration-300 transform hover:-translate-y-2 animate-fade-in" style="animation-delay: 0.1s">
                    <div class="relative h-64 overflow-hidden">
                        <img src="https://picsum.photos/id/31/400/600" alt="李华" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
                    </div>
                    <div class="p-5 text-center">
                        <h3 class="text-xl font-bold mb-1">李华</h3>
                        <p class="text-burgundy mb-3">国际部主任</p>
                        <p class="text-gray-600 text-sm">曾驻美国、英国等地，擅长国际新闻报道，熟悉多国文化与政治环境。</p>
                    </div>
                </div>
                
                <div class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-all duration-300 transform hover:-translate-y-2 animate-fade-in" style="animation-delay: 0.2s">
                    <div class="relative h-64 overflow-hidden">
                        <img src="https://picsum.photos/id/32/400/600" alt="王芳" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
                    </div>
                    <div class="p-5 text-center">
                        <h3 class="text-xl font-bold mb-1">王芳</h3>
                        <p class="text-burgundy mb-3">经济部主任</p>
                        <p class="text-gray-600 text-sm">经济学博士，曾任职于金融机构，擅长解读经济政策与市场趋势。</p>
                    </div>
                </div>
                
                <div class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-all duration-300 transform hover:-translate-y-2 animate-fade-in" style="animation-delay: 0.3s">
                    <div class="relative h-64 overflow-hidden">
                        <img src="https://picsum.photos/id/33/400/600" alt="赵强" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
                    </div>
                    <div class="p-5 text-center">
                        <h3 class="text-xl font-bold mb-1">赵强</h3>
                        <p class="text-burgundy mb-3">技术总监</p>
                        <p class="text-gray-600 text-sm">资深媒体技术专家，负责通讯社数字化转型与新媒体平台建设。</p>
                    </div>
                </div>
            `;
        }
        
        // 联系表单提交处理
        document.querySelector('form').addEventListener('submit', function(e) {
            e.preventDefault();
            
            // 在实际项目中，这里会将表单数据发送到服务器
            alert('感谢您的留言！我们会尽快回复您。');
            this.reset();
        });
        
        // 初始加载内容
        document.addEventListener('DOMContentLoaded', () => {
            loadAboutContent();
            loadValues();
            loadTeam();
        });
    </script>
</body>
</html>